<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport"
	content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8" />
<title>changyy.pixnet.net</title>
<link href="css/jquery.mobile-1.1.0.css" rel="stylesheet"
	type="text/css" />
<link href="css/scrollbar.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/jquery.mobile.scrollview.css" />
<link rel="stylesheet" href="css/eb.css" />

<style type="text/css" media="screen">
.square {
	height: 400px;
	float: left;
	position: relative;
}

.transformed {
	-webkit-transform: rotate(90deg) scale(1, 1);
	-moz-transform: rotate(90deg) scale(1, 1);
	-ms-transform: rotate(90deg) scale(1, 1);
	-webkit-transform: translateX(-50%) rotate(90deg) scale(1, 1);
	transform: translateX(-100px);
	display: block;
}

.resultListTable th {
	font-family: "Verdana", "新細明體", "taipei", "Verdana";
	color: #FFFFFF;
	font-style: normal;
	font-size: 12px;
	line-height: 175%;
	background-color: #006699;
	text-align: center;
	border-width: 2px;
	border-style: ridge;
}

#scroller {
	width: 750px;
	height: 100%;
	float: left;
	padding: 0;
}

#scroller ul {
	list-style: none;
	display: block;
	float: left;
	width: 100%;
	height: 40px;
	padding: 0;
	margin: 0;
	text-align: left;
}

#scroller li {
	display: block;
	vertical-align: middle;
	float: left;
	padding: 0 10px;
	width: 70px;
	height: 100%;
	border-left: 1px solid #ccc;
	border-right: 1px solid #fff; //
	background-color: #fafafa; //
	font-size: 14px;
}
</style>

<script src="js/jquery-1.7.2.js"></script>

<!-- 
    <script src="js/phonegap-desktop.js"></script>  -->
<script src="js/cordova-1.6.1.js"></script>
<script type="text/javascript" src="js/barcodescanner.js"></script>
<script src="js/jquery-barcode-2.0.2.js"></script>
<script src="js/jquery.mobile-1.1.0.js"></script>
<script src="js/dataaccess.js"></script>


<script>
	document.addEventListener("deviceready", onDeviceReady, false);
	$(document).bind("pageinit", onMobileInit);
	document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

	//document.addEventListener('DOMContentLoaded', loaded, false);
	var myScroll;
	

	function onMobileInit() {
		$.mobile.allowCrossDomainPages = true;
		$.mobile.page.prototype.options.backBtnText = "返回";
		$.mobile.page.prototype.options.addBackBtn = true;
		$.mobile.defaultDialogTransition='none';
		$.mobile.defaultPageTransition='none';
		$.mobile.buttonMarkup.hoverDelay=100;
    //$.mobile.loader.prototype.options.textVisible = true;
   // $.mobile.loader.prototype.options.text = "載入中";
    $.mobile.loadingMessage=   "載入中";
    $.mobile.loadingMessageTextVisible = true;
    $.mobile.page.prototype.options.headerTheme = "b";  // Page header only
		$.mobile.page.prototype.options.contentTheme    = "b";
		$.mobile.page.prototype.options.footerTheme = "b";
		
		//list view theme
		$.mobile.listview.prototype.options.headerTheme = "a";  // Header for nested lists
    $.mobile.listview.prototype.options.theme           = "c";  // List items / content
    $.mobile.listview.prototype.options.dividerTheme    = "d";  // List divider
		//$.mobile.listview.prototype.options.theme           = "c";  // List items / content
    $.mobile.listview.prototype.options.splitTheme   = "c";
    $.mobile.listview.prototype.options.countTheme   = "c";
    $.mobile.listview.prototype.options.filterTheme = "c";
		//$.mobile.autoInitializePage=false;
		
		//alert('add scroll');
		
		initDb();
	}
	function onDeviceReady() {
		console.log('device ready');
		
		
		//建立資料庫
		//initDb();
		$.mobile.initializePage;
	}
	
	
	function scanBill() {
		window.plugins.barcodeScanner.scan(function(result) {
			console.log(result);
			if (result.text && result.text.length > 10) {
				$.mobile.changePage("#p_save_bill");
				console.log("bill_nbr: " + result.text);
				var bill_date = result.text.substring(0, 5);
				var bill_nbr_pre = result.text.substring(5, 7);
				var bill_nbr_sub = result.text.substring(7);
				$('#bill_nbr_pre').val(bill_nbr_pre);
				$('#bill_nbr_sub').val(bill_nbr_sub);
			} else {
				alert('發票號碼掃描錯誤');
			}

		}, function(error) {
			alert("Scan failed: " + error);
		});
	}

	function showSaveBill() {
		$.mobile.changePage("#p_save_bill");
		$('#bill_date').html(getBillDateDisplay());
		$('#bill_nbr_pre').addEventListener('touchstart' /*'mousedown'*/, function(e) {
		    e.stopPropagation();
		}, false);
	}
	
	
	function getBillDateDisplay() {
		var today = new Date();
		var year = today.getFullYear()-1911;
		var month = today.getMonth() +1;
		console.log('year'+year);
		console.log('month'+month);
		
		//100年3-4月
		var result = year+'年';
		if((month %2) == 0) {
			result += getMonth(month-1) +'-'+getMonth(month)+'月';
		} else {
			result += getMonth(month) +'-'+getMonth(month+1)+'月';
		}
		console.log('result'+result);
		return result;
	}
	
	function getMonth(month ) {
		if(month <10) {
			return '0'+month;
		} else {
			return month;
		}
	}
	
	function saveBill() {
		var row = new Object();
		row.date = $('#bill_date').html();
		row.nbr = $('#bill_nbr_pre').val()+$('#bill_nbr_sub').val();
		row.type = $('#pay_class_select').val();
		row.comment = $('#bill_comment').val();
		row.price=0;
		row.win='n';
		var today = new Date()
		var month = today.getMonth() +1;
		var date = today.getDate();
		row.datestamp=getMonth(month)+"/"+getMonth(date);
		
		console.log("insert row data");
		console.log(row)
		insertEb(row,billSaveFail,billSaveSuccess  );
	}
	
	function billSaveSuccess() {
		alert('儲存成功');
	}
	
	function billSaveFail(err){
		console.log(err.code);
		alert('儲存失敗');
	}

	function encodeQrCode() {
		$.mobile.changePage("#p_show_code");
		$("#barcodeTarget").html("").show().barcode("1234567890128", "code39",
				{
					barWidth : 2,
					barHeight : 100,
					output : "css"
				});

	}
	
	
	function showQueryBill(){
		//$.mobile.loadPage("#p_query_bill");
		//myScroll = new iScroll('wrapper');
		//$('#scrolltable').scrollview();
		queryEb(getBillDateDisplay(),querySuccess,queryFail);
		$.mobile.changePage("#p_query_bill");
		//$("#p_query_bill").page();
		
	}
	
	function querySuccess(tx, results) {
		console.log("Returned rows = " + results.rows.length);
		console.log(results);
		for(var i=0; i <results.rows.length;i++) {
			console.log(results.rows.item(i));
			var item = results.rows.item(i);
			$('#queryBillResultTable > tbody:last').append("<tr><td>"+item.datestamp+"</td><td>"+item.bill_nbr+"</td><td>"+item.bill_type+"</td><td>"+item.is_win+'</td><td><a data-role="button" data-icon="search" data-iconpos="notext"  data-inline="true"></a></td><td><a data-role="button" data-icon="search" data-iconpos="notext" data-inline="true"></a></td></tr>');
			$('#queryBillResultTable').trigger('create');
		}
		// this will be true since it was a select statement and so rowsAffected was 0
		
	}
	
	function queryFail(err) {
		console.log("failed:");
		console.log(err);
	}
		
</script>
</head>
<body class="ui-mobile-viewport ui-overlay-c">

	<!-- home start -->
	<div id="home" data-role="page" >
		<div data-role="header" data-nobackbtn="true"  data-theme="b"
			data-position="fixed">
			<h1 class="ui-title" role="heading" aria-level="1">電子發票</h1>
		</div>
		<!-- /header -->
		<div data-role="content">

			<div data-role="listview">
				<li><a onclick="scanBill()">scan</a></li>
				<li><a onclick="showSaveBill()">發票儲存</a></li>
				<li><a onclick="encodeQrCode()">顯示qrcode</a></li>
				<li><a onclick="showQueryBill()">發票明細查詢</a></li>


			</div>

		</div>

		<div data-role="footer" data-position="fixed" data-theme="b">
			<div data-role="navbar" class="ui-navbar">
				<ul class="ui-grid-c">
					<li class="ui-block-a"><a href="#p_basic_bill_service"
						data-rel="dialog" data-transition="none"><span
							class="ui-btn-inner"><span class="ui-btn-text">發票基本服務</span>
						</span> </a></li>
					<li class="ui-block-b"><a href="dialog.html" data-rel="dialog"
						data-transition="none"><span class="ui-btn-inner"><span
								class="ui-btn-text">電子發票管理</span> </span> </a></li>
					<li class="ui-block-c"><a href="dialog.html" data-rel="dialog"
						data-transition="none"><span class="ui-btn-inner"><span
								class="ui-btn-text">發票捐贈服務</span> </span> </a></li>
					<li class="ui-block-d"><a href="dialog.html" data-rel="dialog"
						data-transition="none"><span class="ui-btn-inner"><span
								class="ui-btn-inner"><span class="ui-btn-text">對獎號碼查詢</span>
							</span>
					</a></li>
				</ul>
				<ul class="ui-grid-c">
					<li class="ui-block-a"><a href="dialog.html" data-rel="dialog"
						data-transition="none"><span class="ui-btn-inner"><span
								class="ui-btn-inner"><span class="ui-btn-text">協辦商家搜尋</span>
							</span>
					</a></li>
					<li class="ui-block-b"><a href="dialog.html" data-rel="dialog"
						data-transition="none"><span class="ui-btn-inner"><span
								class="ui-btn-inner"><span class="ui-btn-text">懶人大補貼</span>
							</span>
					</a></li>
					<li class="ui-block-c"><a href="dialog.html" data-rel="dialog"
						data-transition="none"><span class="ui-btn-inner"><span
								class="ui-btn-inner"><span class="ui-btn-text">其它相關連結</span>
							</span>
					</a></li>
					<li class="ui-block-d"><a href="dialog.html" data-rel="dialog"
						data-transition="none"><span class="ui-btn-inner"><span
								class="ui-btn-inner"><span class="ui-btn-text">Facebook</span>
							</span>
					</a></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- home end -->

	<!-- basic_bill_service_page start  -->
	<div id="p_basic_bill_service" data-role="dialog">
		<div data-role="header" data-nobackbtn="true"
			data-position="fixed">
			<h1 class="ui-title">發票基本服務</h1>
		</div>

		<div data-role="content">
			<div data-role="listview">
				<li><h3>使用載具條碼</h3></li>
				<li><a href="#p_regist_code_m">申請載具條碼</a></li>
				<li><a href="#p_scan_bill" data-rel="dialog"
					data-transition="none">掃描電子發票</a>
				<li><a href="bmw.html">手動輸入電子發票</a></li>
				<li><a href="acura.html">即時對獎</a></li>
			</div>
		</div>
	</div>
	<!-- basic_bill_service_page end -->

	<!--scan_bill_page  -->
	<div id="p_scan_bill" data-role="dialog">
		<div data-role="header" data-nobackbtn="true"
			data-position="fixed">
			<h1 class="ui-title" role="heading" aria-level="1">發票基本服務</h1>
		</div>

		<div data-role="content">
			<div data-role="listview">
				<li><a onclick="scanBill()">掃描電子發票</a>
				</li>
				<li>手動輸入電子發票</li>
				<li>即時對獎</li>
			</div>
		</div>
	</div>
	<!-- 電子發票管理 -->
	<div id="p_scan_bill" data-role="dialog">
		<div data-role="header" data-nobackbtn="true"
			data-position="fixed">
			<h1 class="ui-title" role="heading" aria-level="1">電子發票管理</h1>
		</div>

		<div data-role="content">
			<div data-role="listview">
				<li><a>發票明細查詢</a>
				</li>
				<li>貼心提醒設定</li>
				<li>中獎發票查詢</li>
				<li>電子發票記帳</li>
			</div>
		</div>
	</div>

	<!-- 申請載具條碼-首頁 -->
	<div id='p_regist_code_m' data-role="page">
		<div data-role="header" data-nobackbtn="true"
			data-position="fixed">
			<h1 class="ui-title" role="heading" aria-level="1">電子發票</h1>
		</div>
		<div data-role="content">
			<label>手機申請電子發票，索取電子發票更方便!</label>
			<ul data-role="listview" class="ui-listview">
				<li data-corners="false" data-shadow="false" data-iconshadow="true"
					data-wrapperels="div" data-icon="arrow-r" data-iconpos="right"
					class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c"><div
						class="ui-btn-inner ui-li">
						<div class="ui-btn-text">
							<a href="#p_regist_code_1" class="ui-link-inherit"><h3
									class="ui-li-heading">1. 申請電子發票條碼</h3>
								<p class="ui-li-desc">消費時只要出示申請的條碼，即可索取電子發票囉!</p> </a>
						</div>
						<span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span>
					</div>
				</li>
				<li data-corners="false" data-shadow="false" data-iconshadow="true"
					data-wrapperels="div" data-icon="arrow-r" data-iconpos="right"
					class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c"><div
						class="ui-btn-inner ui-li">
						<div class="ui-btn-text">
							<a href="#p_regist_code_2" class="ui-link-inherit"><h3
									class="ui-li-heading">2. 儲存電子發票條碼</h3>
								<p class="ui-li-desc">使用手機號碼與驗證碼登入，就可以擷取條碼儲存囉</p> </a>
						</div>
						<span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span>
					</div>
				</li>
			</ul>
		</div>
		<div data-role="footer" data-nobackbtn="true"
			data-position="fixed">
			<a href="#home" data-role="button" data-icon="back">離開</a>
		</div>
	</div>

	<!--  申請載具條碼-1-->
	<div id='p_regist_code_1' data-role="page">
		<div data-role="header" data-nobackbtn="true"
			data-position="fixed">
			<h1 class="ui-title" role="heading" aria-level="1">電子發票</h1>
		</div>
		<div data-role="content">
			<div class="ui-grid-a">
				<div class="ui-block-a">
					<label>手機號碼:</label>
				</div>
				<div class="ui-block-b">
					<input type="number" pattern="[0-9]*" name="regist_phone_nbr_1"
						id="regist_phone_nbr_1" value="" />
				</div>
			</div>
			<div class="ui-grid-a">
				<div class="ui-block-a">
					<label>電子信箱:</label>
				</div>
				<div class="ui-block-b">
					<input type="email" name="regist_email_1" id="regist_email_1"
						value="" />
				</div>
			</div>
		</div>
		<div data-role="footer" data-nobackbtn="true"
			data-position="fixed">
			<a data-role="button" data-icon="check">確認申請</a> <a href="#home"
				data-role="button" data-icon="back">離開</a>
		</div>
	</div>

	<!--  申請載具條碼-2-->
	<div id='p_regist_code_2' data-role="page">
		<div data-role="header" data-nobackbtn="true"
			data-position="fixed">
			<h1 class="ui-title" role="heading" aria-level="1">電子發票</h1>
		</div>
		<div data-role="content">
			<div class="ui-grid-a">
				<div class="ui-block-a">
					<label>手機號碼:</label>
				</div>
				<div class="ui-block-b">
					<input type="number" pattern="[0-9]*" name="regist_phone_nbr_2"
						id="regist_phone_nbr_1" value="" />
				</div>
			</div>
			<div class="ui-grid-a">
				<div class="ui-block-a">
					<label>電子信箱:</label>
				</div>
				<div class="ui-block-b">
					<input type="email" name="regist_email_2" id="regist_email_1"
						value="" />
				</div>
			</div>
		</div>
		<div data-role="footer" data-nobackbtn="true"
			data-position="fixed">
			<a data-role="button" data-icon="check">登入</a> <a href="#home"
				data-role="button" data-icon="back">離開</a>
		</div>
	</div>

	<!--  顯示載具條碼-->
	<div id='p_show_code' data-role="page">
		<div data-role="header" data-nobackbtn="true"
			data-position="fixed">
			<h1 class="ui-title" role="heading" aria-level="1">電子發票</h1>
		</div>
		<div data-role="content">
			<div id="barcodeTarget" class="square transformed"></div>
		</div>

	</div>


	<!-- page save_bill -->
	<div id='p_save_bill' data-role="page">
		<div data-role="header" data-nobackbtn="true"
			data-position="fixed">
			<h1 class="ui-title" role="heading" aria-level="1">儲存電子發票</h1>
		</div>
		<div data-role="content">
			<label for="basic">發票期別:</label>
			<div class="ui-grid-b">
				<div class="ui-block-a" style="width: 25%">
					<a data-role="button" data-icon="arrow-l" data-iconpos="notext"
						 data-inline="true" data-corners="true"
						data-shadow="true" data-iconshadow="true" data-wrapperels="span"
						title="My button"
						class="ui-btn ui-btn-inline ui-btn-icon-notext ui-corner-left ui-btn-up-a"><span
						class="ui-btn-inner ui-corner-left" onclick="backwardBillDate()"><span
							class="ui-icon ui-icon-arrow-l ui-icon-shadow">&nbsp;</span> </span> </a>
				</div>
				<div class="ui-block-b" style="width: 50%">
					<label id="bill_date" style="line-height: 40px;"></label> <label
						id="bill_date_hidden" style=""></label>
				</div>
				<div class="ui-block-c" style="width: 25%">
					<a data-role="button" data-icon="arrow-r" data-iconpos="notext"
						 data-inline="true" data-corners="true"
						data-shadow="true" data-iconshadow="true" data-wrapperels="span"
						title="My button"
						class="ui-btn ui-btn-inline ui-btn-icon-notext ui-btn-up-a"><span
						class="ui-btn-inner" onclick="forwardBillDate()"><span
							class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span> </span> </a>
				</div>
			</div>

			<label>發票號碼:</label>

			<div class="ui-grid-b">
				<div class="ui-block-a" style="width: 10%">
					<input type="text" pattern="[A-Z]{2}" name="bill_nbr_pre"
						id="bill_nbr_pre" value="" />
				</div>
				<div class="ui-block-b" style="width: 20px"></div>
				<div class="ui-block-c" style="width: 80%">
					<input type="number" pattern="[0-9]*" name="bill_nbr_sub"
						id="bill_nbr_sub" value="" />
				</div>
			</div>

			<div class="ui-grid-b">
				<div class="ui-block-a" style="width: 25%">
					<label for="basic">支出類別:</label>
				</div>
				<div class="ui-block-b" style="width: 15px"></div>
				<div class="ui-block-b" style="width: 70%">
					<select name="pay_class_select" id="pay_class_select">
						<option value="food">食</option>
						<option value="cloth">衣</option>
						<option value="live">住</option>
						<option value="traffic">行</option>
						<option value="other">其它</option>
					</select>
				</div>
			</div>
			<br /> <label value="備註" for="bill_comment" />
			<textarea name="bill_comment" id="bill_comment"></textarea>
		</div>
		<div data-role="footer" data-nobackbtn="true"
			data-position="fixed">
			<a data-role="button" data-icon="check" onclick="saveBill()">儲存</a> <a
				href="#home" data-role="button" data-icon="back">離開</a>
		</div>
	</div>

	<!-- 發票明細查詢 -->
	<div id='p_query_bill' data-role="page">
		<div data-role="header" data-nobackbtn="true"
			data-position="fixed">
			<h1 class="ui-title" role="heading" aria-level="1">電子發票</h1>
		</div>
		<div data-role="content">
			<div class="ui-grid-b">
				<div class="ui-block-a" style="width: 25%">
					<a data-role="button" data-icon="arrow-l" data-iconpos="notext"
						 data-inline="true" data-corners="true"
						data-shadow="true" data-iconshadow="true" data-wrapperels="span"
						title="My button"
						class="ui-btn ui-btn-inline ui-btn-icon-notext ui-corner-left ui-btn-up-a"><span
						class="ui-btn-inner ui-corner-left" onclick="backwardBillDate()"><span
							class="ui-icon ui-icon-arrow-l ui-icon-shadow">&nbsp;</span> </span> </a>
				</div>
				<div class="ui-block-b" style="width: 50%">
					<label id="bill_date" style="line-height: 40px;"></label> <label
						id="bill_date_hidden" style=""></label>
				</div>
				<div class="ui-block-c" style="width: 25%">
					<a data-role="button" data-icon="arrow-r" data-iconpos="notext"
						 data-inline="true" data-corners="true"
						data-shadow="true" data-iconshadow="true" data-wrapperels="span"
						title="My button"
						class="ui-btn ui-btn-inline ui-btn-icon-notext ui-btn-up-a"><span
						class="ui-btn-inner" onclick="forwardBillDate()"><span
							class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span> </span> </a>
				</div>
			</div>
			<div id="scrolltable" data-scroll="true">
				<table id="queryBillResultTable" style="width: 100%">
					<thead class="ui-bar-b">
						<tr>
							<th>輸入日期</th>
							<th>發票號碼</th>
							<th>支出分類</th>
							<th>狀態</th>
							<th>備註</th>
							<th>明細</th>
						</tr>
					</thead>
					<tbody>

					</tbody>
				</table>
			</div>

		</div>
		<div data-role="footer" data-nobackbtn="true"
			data-position="fixed">
			<a data-role="button" data-icon="check" onclick="delete()">刪除</a> <a
				data-role="button" data-icon="check" onclick="saveBill()">對獎</a> <a
				href="#home" data-role="button" data-icon="back">離開</a>
		</div>
	</div>
</body>
</html>